<template>
    <div v-loading="showLoading" class="own_activity_list" style="min-height:80px">
        <div v-for="activity in activityList" :key="activity.activityId" class="own_activity_item">
            <div>
                <activity-item-component :activityItem="activity" />
                <el-divider border-style="dotted" />
            </div>
        </div>
    </div>
    <!-- <el-pagination style="display:flex;justify-content: center;" background layout="prev, pager, next"
        :hide-on-single-page="true" :page-count="pages" :page-size="pageSize" /> -->
    <!-- <el-pagination background layout="prev, pager, next" :total="10" :page-size="5" /> -->
    <el-empty description="这里空空如也" v-if="activityList != null && activityList.length == 0" />
</template>
<script>
import ActivityItemComponent from './ActivityItemComponent.vue'
export default {
    components: { ActivityItemComponent },
    data() {
        return {
            showLoading: true,
            activityList: null,
        }
    },
    created() {
        this.getActivityList()
    },
    methods: {
        getActivityList() {
            let collegeId=this.$store.state.area.collegeId
            // let groupId=this.$store.state.user.groupId==undefined?0:this.$store.state.user.groupId
            this.$fetchutil.get('/browse/activity/activity_list?&collegeId='+collegeId, data => {
                // console.log(data);
                if(data.data!=null)this.activityList = data.data.data
            })
        }
    },
    watch: {
        '$store.state.user'() {
            this.getActivityList()
        },
        activityList() {
            this.showLoading = this.activityList == null
        }
    }
}
</script>
<style scoped>
.own_activity_list {
    display: flex;
    flex-wrap: wrap;
}

.own_activity_item {
    padding: 10px;
    width: 50%;
}

main {
    max-width: 1240px;
    margin: auto;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
}

main>h1 {
    margin: 20px;
}

article img {
    max-width: 100%;
}

.article_bottom {
    height: fit-content;
    position: fixed;
    padding: 20px;
    bottom: 0px;
    z-index: 5;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    background-color: white;
    border-top: 1px solid #cdd0d6;
}
</style>